<template>
	<view>
		<page-meta>
			<navigation-bar :subtitle-color="nbFrontColor" :loading="nbLoading" :front-color="nbFrontColor"
				:background-color="nbBackgroundColor" />
		</page-meta>
		<view>


			<view class="education-title">
				{{this.banner.msgTitle}}
			</view>
			<view class="auther-time">
				<view style="margin-left: 125rpx;">
					发送人：<text style="color: black; font-size: 29rpx;">{{this.banner.remark}}</text>
				</view>
				<view>
					<text
						style="margin-right: 155rpx; font-size: 19rpx; color: slategray;">{{this.banner.createTime}}</text>
				</view>
			</view>
			<view class="article-meta">
				<view>
					<mp-html style="text-indent: 2em;" :content="this.banner.msgContent" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nbLoading: false,
				nbFrontColor: '#000000',
				nbBackgroundColor: '#fcc10d',
				banner: []
			};
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));

			this.banner = item;
			//详情标题
			uni.setNavigationBarTitle({
				title: this.banner.msgTitle
			});
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.swiper {
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.swiper-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color: #fff;
		height: 400rpx;
		line-height: 300rpx;
	}

	.banner {
		height: 360upx;
		overflow: hidden;
		position: relative;
		background-color: #ccc;
	}

	.education-title {
		font-weight: bold;
		font-size: 38rpx;
		margin-bottom: 16rpx;
		display: flex;
		justify-content: center;
		margin-top: 35rpx;
		margin-bottom: 35rpx;
	}

	.auther-time {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}
</style>
